<!-- index.html -->
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="networkProject">
<head>
	<!-- META -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

	<title>Network Chat Portal</title>

	<!-- SCROLLS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
	<style>
	
		html 							{ overflow-y:scroll; }
		body 							{ padding-top:0px; }
		
		.invisible						{ display: gone }
		
		.restricted						{ background-color:#B00000 }
		.waiting						{ background-color:#FF4141 }
		.selected						{ background-color:#FA9A50 }
		.coin_card						{ background-color:#FFFF7E }
		.action_card					{ background-color:#BF6666 }
		.curse_card						{ background-color:#CA85DC }
		.victory_card					{ background-color:#65FF65 }
		.reaction_card					{ background-color:#60B1FF }
		
		.dialog_box						{ background-color:#C2C2C2; border-color:#60B1FF; border-width:3px }
		
		.unselectableText { 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-o-user-select: none; 
			user-select: none; 
		}
	
		@media only screen and (max-width: 700px)  {
			.game_container					{ width:100%;}
			
			.action_container				{ display: table; width:100%; float:left; }
			.top_container					{ height:65%;  margin-top:250px; }
			.bottom_container				{ height:30%; padding:0px }
			.action_container div			{ margin:0%; }
			
			.buy_container					{ display: table-cell; height:100%; width:48%; float:left; padding:1px; margin-left:5px !important; }
			.log_container					{ top:5px; left:5px; position: absolute; height:235px; width:98%; padding:0px }
			.victory_container				{ display: table-cell; height:100%; width:48%; float:left; padding:1px; margin-left:5px !important; }
			.victory_label					{ margin-top:20px; margin-bottom:20px; }
			
			.log_div						{ position:relative; float:left; width:60%; }
			.info_container_div				{ position:relative; float:left; width:30%; }
			
			.chat_window					{ position:relative; padding-left:5px; background:#000000; color:#ffff00; height: 140px; width:100%; overflow-y:scroll; float:left }
			.chat_form_window				{ padding-left:5px; padding-top:5px; height: 20%; width:100%; float:left }
			.form_text_formatter			{ border-top-right-radius:0;border-bottom-right-radius:0;width:75%;float:left; }
			.form_button_formatter			{ float:left; }
			
			.stat_container					{ position:relative; width:100%; }
			.deck_container					{ position:relative; width:100%;  }
			.info_button					{ margin-left:5px}
			.info_button.waiting:hover		{ background-color:#B00000 }
			.stat_holder					{ width:100%;display:inline; }
			.deck_holder					{ width:100%;display:inline; }
			.deck_label						{ display:none }
			.deck_div						{ display:none }
			.turn_div						{ display:none }
			
			.hand_container					{ height:100%; width:98%; float:left; padding:0px }
			.hand_container	div				{ margin:1%; }
			
			.hand_title_div					{ width:10%; float:left; }
			.info_div						{ text-align:center; width:50%; float:left; }
			.choice_div						{ width:15%; float:left; }
			.decision_div					{ width:15%; float:left; }
			
			.text_div						{ cursor:default !important }
			.card_div						{ padding:5px; cursor:pointer; }
			.stat_label						{ width:100% }
			
			.icon_div						{ float:right; z-index:-1; }
			.coin_icon, .card_icon			{ height:15px; width:15px;}
			
			.useable_card					{ width:150px; height:50px; float:left; text-align:center; padding-top:10px }
			.hover_div 						{ position: relative; }
			.big_img_right 					{ height: 150px; width: 165px; position: absolute; top: -40px; left: 170px; display:none; z-index:100; }
			.big_img_left 					{ height: 150px; width: 165px; position: absolute; top: -40px; right: 170px; display:none; z-index:100; }
			.big_img_right_closer 			{ height: 150px; width: 165px; position: absolute; bottom: 60px; left: 30px; display:none; z-index:100; }
			.hover_div:hover .big_img_right { display:block; }
			.hover_div:hover .big_img_left 	{ display:block; }
			.hover_div:hover .big_img_right_closer 	{ display:none; }
		}
		
		@media only screen and (min-width: 701px)  {
			.game_container					{ width:100%;}
			
			.action_container				{ display: table; width:100%; float:left; }
			.top_container					{ height:65% }
			.bottom_container				{ height:30%; padding:0px }
			.action_container div			{ margin:1%; }
			
			.buy_container					{ display: table-cell; height:100%; width:25%; float:left; }
			.log_container					{ display: table-cell; height:100%; width:40%; float:left; }
			.victory_container				{ display: table-cell; height:100%; width:25%; float:left; }
			.victory_label					{ margin-top:20px; margin-bottom:20px; }
			
			.log_div						{ float:left; width:60%; height:350px }
			.info_container_div				{ float:left; width:30%; }
			
			.chat_window					{ padding-left:5px; background:#000000; color:#ffff00; height: 85%; width:100%; overflow-y:scroll; float:left }
			.chat_form_window				{ padding-left:5px; padding-top:5px; height: 20%; width:100%; float:left }
			.form_text_formatter			{ border-top-right-radius:0;border-bottom-right-radius:0;width:75%;float:left; }
			.form_button_formatter			{ float:left; }
			
			.stat_container					{ width:100%; }
			.deck_container					{ width:100%; }
			.info_button					{ margin-left:25px}
			.info_button.waiting:hover		{ background-color:#B00000 }
			.stat_holder					{ float:left;width:100%;display:inline; }
			.deck_holder					{ float:left;width:100%;display:inline; }
			
			.hand_container					{ height:100%; width:95%; float:left; padding:0px }
			
			.hand_title_div					{ width:10%; float:left; }
			.info_div						{ text-align:center; width:50%; float:left; }
			.choice_div						{ width:15%; float:left; }
			.decision_div					{ width:15%; float:left; }
			
			.text_div						{ cursor:default !important }
			.card_div						{ padding:5px; cursor:pointer; }
			.stat_label						{ width:100% }
			
			.icon_div						{ float:right; }
			.coin_icon, .card_icon			{ height:15px; width:15px; margin-right:5px;}
			
			.useable_card					{ width:150px; height:50px; float:left; text-align:center; padding-top:10px }
			.hover_div 						{ position: relative; }
			.big_img_right 					{ height: 200px; width: 200px; position: absolute; top: -40px; left: 300px; display:none; z-index:100; }
			.big_img_left 					{ height: 200px; width: 200px; position: absolute; top: -40px; right: 300px; display:none; z-index:100; }
			.big_img_right_closer 			{ height: 200px; width: 200px; position: absolute; bottom: 30px; left: 135px; display:none; z-index:100; }
			.hover_div:hover .big_img_right { display:block; }
			.hover_div:hover .big_img_left 	{ display:block; }
			.hover_div:hover .big_img_right_closer 	{ display:block; }
		}
		
		
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
	<script src="/javascripts/game_core.js"></script>
	<script src="/javascripts/decision_actions.js"></script>
	<script src="/javascripts/global.js"></script>
	<script src="/javascripts/services.js"></script>
	<script src="/socket.io/socket.io.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="gameController">
	<div class="game_container unselectableText">
		<div class="action_container top_container">
		<div class="well buy_container">
			<div style="margin-bottom:15px" class="text_div"><b>Store</b></div>
		    <div class="buy_div" ng-repeat="card in filterCards(cards,'type',['action']) | orderBy:sort_cost:true">
		    	<div ng-class="{selected: card.selected}" class="well card_div hover_div" ng-click="buy_card(card)"> {{ card.name }} 
		    		<div class="icon_div">
			    			<img class="coin_icon" src="/images/coin_icon.png"/> {{ card.cost }} 
			    			<img class="card_icon" src="/images/card_icon.png"/>{{ card.current_quantity }} 
		    		</div>
		    		<div class="big_img_right well dialog_box"><b class="dialog_description">{{ card.name }}</b><br>
		    			<div ng-repeat="attr in card.description"> 
		    				{{ attr }} <br>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		</div>
		<div class="well log_container">
		    <div class="log_div">
		    	<div id="content" class="chat_window">
		    	</div>
		    	<div class="chat_form_window">
			    	<form>
					    <input type='text' id="message_field" class="form-control form_text_formatter" placeholder="message" ng-model='user.message'>
					    <span class="input-group-btn">
					    	<input class="btn btn-default form_button_formatter" type='submit' value='Send' ng-click='send(user)' /> 
					    </span>
					</form>
				</div>
			</div>
	    	<div class="info_container_div">
	    		<div class="stat_container">
					<div class="stat_holder">
						<div class="stat_label well card_div text_div turn_div">
							<b> Turn: {{ stats.turn }} </b>
						</div>
						<div class="stat_label well card_div text_div">
							<b> Actions: {{ stats.action }} </b>
						</div>
						<div class="stat_label well card_div text_div">
							<b> Buys: {{ stats.buy }} </b>
						</div>
						<div class="stat_label well card_div text_div">
							<b> Money: {{ stats.money }} </b>
						</div>
						<button type="button" class="btn btn-primary info_button waiting" ng-click="exit_game()" style="margin-top:10px">Exit Game</button>
					</div>
				</div>
		    	<div class="deck_container">
					<div class="deck_holder">
						<div class="deck_label text_div" style="height:20px">
							<b> Deck </b>
						</div>
						<div class="deck_div">
							<div class="well card_div text_div"> {{ deck.length }} </div>
						</div>
						<div class="deck_label text_div" style="height:20px">
							<b> Discard </b>
						</div>
						<div class="deck_div">
							<div class="well card_div text_div"> {{ discard.length }} </div>
						</div>
						<button type="button" class="btn btn-primary info_button" ng-class="{invisible: !player_turn || game_over}" ng-click="end_turn()" style="margin-top:10px">End Turn</button>
					</div>
				</div>
			</div>
		</div>
		<div class="well victory_container">
			<div style="margin-bottom:15px" class="text_div"><b>Victory Points</b></div>
		    <div class="victory_div" ng-repeat="card in filterCards(cards,'type',['victory']).slice().reverse() | orderBy:sort_cost:true">
		    	<div ng-class="{selected: card.selected}" class="well card_div hover_div" ng-click="buy_card(card)"> {{ card.name }} 
		    		<div class="icon_div">
			    			<img class="coin_icon" src="/images/coin_icon.png"/> {{ card.cost }} 
			    			<img class="card_icon" src="/images/card_icon.png"/>{{ card.current_quantity }} 
		    		</div>
		    		<div class="big_img_left well dialog_box"><b class="dialog_description">{{ card.name }}</b><br>
		    			<div ng-repeat="attr in card.description"> 
		    				{{ attr }} <br>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		    <div style="margin-top:20px;margin-bottom:15px" class="text_div"><b>Money</b></div>
		    <div class="bank_div" ng-repeat="card in filterCards(cards,'type',['coin']).slice().reverse() | orderBy:sort_cost:true">
		    	<div ng-class="{selected: card.selected}" class="well card_div hover_div" ng-click="buy_card(card)"> {{ card.name }} 
		    		<div class="icon_div">
			    			<img class="coin_icon" src="/images/coin_icon.png"/> {{ card.cost }} 
			    			<img class="card_icon" src="/images/card_icon.png"/>{{ card.current_quantity }} 
		    		</div>
		    		<div class="big_img_left well dialog_box"><b class="dialog_description">{{ card.name }}</b><br>
		    			<div ng-repeat="attr in card.description"> 
		    				{{ attr }} <br>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		</div>
		</div>
		<!-- <br> -->
		<div class="action_container bottom_container">
			<div ng-class="{waiting: waiting || (!player_turn && !selecting_cards)}" class="hand_container well">
				<div class="" style="float:left;width:100%;">
					<div class="hand_label" style="height:20px">
						<div class="hand_title_div text_div"><b> Hand </b></div>
						<div class="info_div"> {{ decision_info }}</div>
						<div class="choice_div">
							<button ng-class="{invisible: !choice}" class="decision_button btn btn-primary" type="button" ng-click="make_choice(true)">Yes</button>
							<button ng-class="{invisible: !choice}" class="decision_button btn btn-primary" type="button" ng-click="make_choice(false)">No</button>
						</div>
						<div class="decision_div">
							<button ng-class="{invisible: !decision}" class="decision_button btn btn-primary" type="button" ng-click="make_decision()">Done</button>
						</div>
					</div>
					<div class="hand_div" ng-repeat="card in hand_view">
						<div ng-class="{selected: card.selected,
						coin_card: (card.type.indexOf('coin') != -1 && player_turn && !selecting_cards),
						action_card: (card.type.indexOf('action') != -1 && card.type.indexOf('reaction') == -1 && player_turn && !selecting_cards),
						curse_card: (card.type.indexOf('curse') != -1 && player_turn && !selecting_cards),
						victory_card: (card.type.indexOf('victory') != -1 && card.type.indexOf('curse') == -1 && player_turn && !selecting_cards),
						reaction_card: (card.type.indexOf('reaction') != -1 && player_turn && !selecting_cards)}" 
						class="hover_div well card_div useable_card" ng-click="use_card(card)"> {{ card.name }} 
							<div class="big_img_right_closer well dialog_box"><b class="dialog_description">{{ card.name }}</b><br>
				    			<div ng-repeat="attr in card.description"> 
				    				{{ attr }} <br>
				    			</div>
			    			</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</body>
</html>